<template>
  <div class="tag-selector">
    <a-card class="sticky top-0 z-10" :bordered="false" :body-style="{ padding: '1rem' }">
      <div class="flex flex-col gap-4">
        <div class="font-bold text-[1.5rem] flex justify-between items-center">
          <div>选择标签</div>
        </div>
        <a-input-search
          allow-clear
          placeholder="请输入标签代码"
          v-model:value="query.mediaId"
          @search="search"
        />
        <div>
          <a-pagination
            v-model:current="query.pageNum"
            :page-size="query.pageSize"
            :total="query.total"
            size="small"
            @change="onChange"
            responsive
            showLessItems
            showQuickJumper
            simple
          ></a-pagination>
        </div>
      </div>
    </a-card>

    <a-list
      size="small"
      :data-source="table.data"
      :loading="table.loading"
      :load-more="true"
      :pagination="false"
      class="p-1"
    >
      <template #renderItem="{ item }">
        <div
          class="flex justify-between cursor-pointer p-4 item"
          :class="{ active: item.mediaId === mediaId }"
          @click="selectItem(item)"
        >
          <div>
            {{ item.mediaId }}
          </div>
          <div class="actions">
            <a-popover trigger="click" placement="right">
              <InfoCircleOutlined />
              <template #content>
                <div class="w-[300px]">
                  <a-descriptions :title="t('详细信息')" :column="1">
                    <a-descriptions-item label="标签码">
                      <h1 class="text-[1.2rem] font-bold">
                        {{ item.mediaId }}
                      </h1>
                    </a-descriptions-item>
                    <a-descriptions-item :label="t('商品')">
                      {{ item.goodsName?.split(',').join('') }}
                    </a-descriptions-item>
                    <a-descriptions-item :label="t('条形码')">
                      <EmptyLabel :text="item.barCode"></EmptyLabel>
                    </a-descriptions-item>
                    <a-descriptions-item :label="t('门店')">
                      <EmptyLabel :text="item.storeName"></EmptyLabel>
                    </a-descriptions-item>
                    <a-descriptions-item :label="t('分组')">
                      <template v-if="label">
                        <template v-for="(m, n) in item.label?.split(',')" :key="n">
                          <a-tag :bordered="false" v-if="m">
                            {{ m }}
                          </a-tag>
                        </template>
                      </template>
                      <EmptyLabel v-else />
                    </a-descriptions-item>
                  </a-descriptions>
                </div>
              </template>
            </a-popover>
          </div>
        </div>
      </template>
    </a-list>
  </div>
</template>

<script setup lang="ts">
import { mediaDeviceList, type Media } from '@/api/modules/lcd/lcd-device';
import { useQuery, useTable } from '@/hooks/table';
import { InfoCircleOutlined } from '@ant-design/icons-vue';

const { t } = useI18n();
const query = useQuery<Media>();
const table = useTable<Media>();
const props = defineProps<Partial<Media>>();

const mediaId = defineModel<string>('mediaId');
const modelValue = defineModel<Media>('modelValue');
const emit = defineEmits(['select']);

const getTags = async () => {
  table.value.loading = true;
  const { data } = await mediaDeviceList(query.value);
  query.value.total = data.total;
  table.value.data = data.rows;
  table.value.loading = false;
};

const onChange = (page: number, pageSize: number) => {
  query.value.pageSize = pageSize;
  query.value.pageNum = page;
  getTags();
};
const selectItem = (tag: Media) => {
  modelValue.value = tag;
  mediaId.value = tag.mediaId;
  emit('select', tag);
};

const search = () => {
  query.value.pageNum = 1;
  getTags();
};
onMounted(() => {
  query.value = Object.assign(query.value, props);
  getTags();
});
defineExpose<{
  loadData: () => any;
}>({
  loadData: getTags,
});
</script>

<style lang="scss" scoped>
:deep(.ant-list-item) {
  border: 1px solid transparent;
  border-radius: var(--radius);
}
.tag-selector {
  height: 100%;
  overflow-y: auto;
}
.active {
  outline: 1px solid var(--primary);
  background-color: var(--primary);
  * {
    color: white;
  }
  .actions {
    opacity: 1 !important;
  }
}
.item {
  border-radius: var(--radius);
  .actions {
    opacity: 0;
  }
  &:hover {
    .actions {
      opacity: 1;
    }
  }
}
</style>
